<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="static/css/global/generic.css" rel="stylesheet" type="text/css">
<link href="static/css/page/index.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="static/css/page/owl.carousel.css">
<link type="text/css" rel="stylesheet" href="static/css/page/owl.theme.css">
<title>SeaHello</title>
</head>
<body>
<!-- 顶部导航条  -->
<div class="header font">
  <ul class="left">
    <a href="#"><li>HOME |<br/>主&nbsp;&nbsp;&nbsp;页 |</li></a>
    <a href="#"><li>CATEGORY |<br/>商&nbsp;品&nbsp;类&nbsp;目&nbsp; |</li></a>
    <a href="#"><li>PROJECT |<br/>艺&nbsp;&nbsp;项&nbsp;&nbsp;目 |</li></a>
    <a href="#"><li>IN SELLER |<br/>I&nbsp;N&nbsp; 店&nbsp;主&nbsp; |</li></a>
    <a href="#"><li>EMAIL(<span class="headerMailNum">28</span>)<br/>邮&nbsp;&nbsp;箱</li></a>
  </ul>
  <ul class="right">
    <a href="#"><li class="headerSignIn">SIGN IN<br/>登录账户</li></a>
    <a href="#"><li class="headerRightLi">| REGISTER<br/>| 注册一下吧</li></a>
    <a href="#"><li class="headerRightLi"><span class="cartIcon"></span>CART<br/>购物车</li></a>
    <a href="#"><li class="headerRightLi"><span class="favoriteIcon"></span>FAVORITE<br/>我最喜爱的</li></a>
    <a href="#"><li class="headerRightLi"><span class="helpIcon"></span>HELP<br/>联系西罗</li></a>
  </ul>
</div>
<!-- 顶部导航条结束  -->


<!-- logo  -->
<a href="index.html"><div class="logo contentWidth center"></div></a>
<!-- logo结束  -->


<!-- navigation和全局搜索  -->
<div class="navigationAndSearch contentWidth center font en_M">
  <ul class="navigation left">
    <a href="#"><li>PRODUCTS<span class="productsTrigger right"></span></li></a>
      
    <a href="#"><li>SHOPS</li></a>
    <a href="#"><li>INDENPENT BRANDS</li></a>
    <a href="#"><li>PROJECTS</li></a>
    <a href="#"><li>DESIGNERS</li></a>
    <a href="#"><li>LOOK BOOKS</li></a>
  </ul>
  <div class="globalSearch right">
    <form>
      <input type="text" class="font searchInput left radius en_SS" placeholder="SEARCH FOR SOMETHING"/>
      <input type="submit" class="font searchButton right radius en_M fontColorWhite" value="SEARCH"/>
    </form>
  </div>
    <!-- products下面的二级dropdown导航 -->
    <div class="productSubNavigation relative font fontColorGray">
      <ul class="europeProductAddress left">
        <li class="productSubTitle">欧洲 EUROPE</li>
        <a href="#"><li class="productAddress">UNITED KINGDOM</li></a>
        <a href="#"><li class="productAddress">GERMAN</li></a>
        <a href="#"><li class="productAddress">FRANCE</li></a>
        <a href="#"><li class="productAddress">SPAIN</li></a>
        <a href="#"><li class="productAddress">ITALY</li></a>
        <a href="#"><li class="productAddress">DENMARK</li></a>
        <a href="#"><li class="productAddress">FINLAND</li></a>
        <a href="#"><li class="productAddress">NETHERLANDS</li></a>
        <a href="#"><li class="productAddress">IRELAND</li></a>
        <a href="#"><li class="productAddress">SWITZERLAND</li></a>
        <a href="#"><li class="productAddress">AUSTRALIA</li></a>
      </ul>
      <ul class="americaProductAddress right">
        <li class="productSubTitle">美洲 AMERICA</li>
        <a href="#"><li class="productAddress">UNITED STATES</li></a>
        <a href="#"><li class="productAddress">CANADA</li></a>
        <a href="#"><li class="productAddress">MEXICO</li></a>
        <a href="#"><li class="productAddress">BRAZIL</li></a>
        <a href="#"><li class="productAddress">ARGENTINA</li></a>
      </ul>
      <ul class="asiaProductAddress right">
        <li class="productSubTitle">亚洲 ASIA</li>
        <a href="#"><li class="productAddress">JAPAN</li></a>
        <a href="#"><li class="productAddress">KOREA</li></a>
        <a href="#"><li class="productAddress">SINGAPORE</li></a>
      </ul>
    </div>
</div>
<script type="text/javascript" src="static/javascript/jquery.min.js" ></script>
<script type="text/javascript">
  $(document).ready(function(){
	  $(".productsTrigger").toggle(
	  function(){
		  $(this).css("background-image","url(static/images/global/dropUpArrow.png)");
		  $(".productSubNavigation").css("height","280px");
		  },
	  function(){
		  $(this).css("background-image","url(static/images/global/dropDownArrow.png)");
		  $(".productSubNavigation").css("height","0px");
		  }
	  );
	  })
</script>

<!-- navigation和全局搜索结束  -->


<!-- 轮播banner  -->
<div class="banner">
  <div class="main_visual">
	<div class="flicking_con">
		<a href="#">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
	</div>
	<div class="main_image">
		<ul>
			<li><span class="img_3"></span></li>
			<li><span class="img_4"></span></li>
			<li><span class="img_1"></span></li>
			<li><span class="img_2"></span></li>
			<li><span class="img_5"></span></li>
		</ul>
		<a href="javascript:;" class="btn_prev"></a>
		<a href="javascript:;" class="btn_next"></a>
	</div>
  </div>
</div>
<script type="text/javascript" src="static/javascript/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".main_visual").hover(function(){
		$(".btn_prev,.btn_next").fadeIn()
	},function(){
		$(".btn_prev,.btn_next").fadeOut()
	});
	
	$dragBln = false;
	
	$(".main_image").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $(".btn_prev"),
		btn_next : $(".btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e){
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	
	$(".main_image").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".main_image").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".main_image a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$(".btn_next").click();
	}, 5000);
	
	$(".main_visual").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$(".btn_next").click();
		},5000);
	});
	
	$(".main_image").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$(".btn_next").click();
		}, 5000);
	});
	
});
</script>
<!-- 轮播banner 结束  -->


<!-- hot sales 商品热卖  -->
<div class="hotSale">
  <div class="font hotSaleTitle en_LM fontColorGray">·HOT SALE·</div>
  <div class="hotSaleStreamImages contentWidth center">
    <div class="hotSalesLeft left">
    <div class="streamImage1 streamImage">  <!-- hotSale 第一张图 -->
      <div class="streamImageTransparent">
        <div class="hotSaleItemTitle en_LM font fontColorWhite">THE NAME OF HOT SALE ITEM</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">€ 50.0</div>
        <div class="hotSalerPhoto left"></div>
        <div class="hotSalerName en_M font fontColorWhite right">STORE NAME</div>
      </div>
    </div>
    <div class="streamImage2 streamImage">  <!-- hotSale 第二张图 -->
      <div class="streamImageTransparent">
        <div class="hotSaleItemTitle en_LM font fontColorWhite">THE NAME OF HOT SALE ITEM</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">€ 50.0</div>
        <div class="hotSalerPhoto left"></div>
        <div class="hotSalerName en_M font fontColorWhite right">STORE NAME</div>
      </div>
    </div>
    </div>
    
    <div class="hotSalesMiddle left">
    <div class="streamImage3 streamImage">  <!-- hotSale 第三张图 -->
      <div class="streamImageTransparent">
        <div class="hotSaleItemTitle en_LM font fontColorWhite">THE NAME OF HOT SALE ITEM</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">€ 50.0</div>
        <div class="hotSalerPhoto left"></div>
        <div class="hotSalerName en_M font fontColorWhite right">STORE NAME</div>
      </div>
    </div>
    <div class="streamImage4 streamImage">  <!-- hotSale 第四张图 -->
      <div class="streamImageTransparent">
        <div class="hotSaleItemTitle en_LM font fontColorWhite">THE NAME OF HOT SALE ITEM</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">€ 50.0</div>
        <div class="hotSalerPhoto left"></div>
        <div class="hotSalerName en_M font fontColorWhite right">STORE NAME</div>
      </div>
    </div>
    </div>
    
    <div class="hotSalesRight right">
    <div class="streamImage5 streamImage">  <!-- hotSale 第五张图 -->
      <div class="streamImageTransparent">
        <div class="hotSaleItemTitle en_LM font fontColorWhite">THE NAME OF HOT SALE ITEM</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">€ 50.0</div>
        <div class="hotSalerPhoto left"></div>
        <div class="hotSalerName en_M font fontColorWhite right">STORE NAME</div>
      </div>
    </div>
    <div class="streamImage6 streamImage">  <!-- hotSale 第六张图 -->
      <div class="streamImageTransparent">
        <div class="hotSaleItemTitle en_LM font fontColorWhite">THE NAME OF HOT SALE ITEM</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">€ 50.0</div>
        <div class="hotSalerPhoto left"></div>
        <div class="hotSalerName en_M font fontColorWhite right">STORE NAME</div>
      </div>
    </div>
    </div>
  </div>
</div>
<a class="readMore" href="#"><div class="saleReadMore contentWidth center font en_M fontColorGray">READ MORE</div></a>

<script type="text/javascript">
$(document).ready(function(){
	//先在hot sale中加载瀑布流数据
	var imgOne=$(".streamImage1");
	var imgTwo=$(".streamImage2");
	var imgThree=$(".streamImage3");
	var imgFour=$(".streamImage4");
	var imgFive=$(".streamImage5");
	var imgSix=$(".streamImage6");
	
	// 卖家头像
	var photoOne=imgOne.children(".streamImageTransparent").children(".hotSalerPhoto");
	var photoTwo=imgTwo.children(".streamImageTransparent").children(".hotSalerPhoto");
	var photoThree=imgThree.children(".streamImageTransparent").children(".hotSalerPhoto");
	var photoFour=imgFour.children(".streamImageTransparent").children(".hotSalerPhoto");
	var photoFive=imgFive.children(".streamImageTransparent").children(".hotSalerPhoto");
	var photoSix=imgSix.children(".streamImageTransparent").children(".hotSalerPhoto");
	//卖家头像
	
	imgOne.css("background-image","url(static/images/page/index/stream1.png)");
	imgTwo.css("background-image","url(static/images/page/index/stream2.png)");
	imgThree.css("background-image","url(static/images/page/index/stream3.png)");
	imgFour.css("background-image","url(static/images/page/index/stream4.png)");
	imgFive.css("background-image","url(static/images/page/index/stream5.png)");
	imgSix.css("background-image","url(static/images/page/index/stream6.png)");
	
	photoOne.css("background-image","url(static/images/page/index/salerPhoto.png)");
	photoTwo.css("background-image","url(static/images/page/index/salerPhoto.png)");
	photoThree.css("background-image","url(static/images/page/index/salerPhoto.png)");
	photoFour.css("background-image","url(static/images/page/index/salerPhoto.png)");
	photoFive.css("background-image","url(static/images/page/index/salerPhoto.png)");
	photoSix.css("background-image","url(static/images/page/index/salerPhoto.png)");
	})
	
	//透明遮罩效果切换
	$(".streamImage").mouseenter(function(){
		$(this).children(".streamImageTransparent").animate({height:"100%"},400);
		})
	$(".streamImage").mouseleave(function(){
		$(this).children(".streamImageTransparent").animate({height:"0%"},400);
		})
</script>

<!-- hot sales 商品热卖结束  -->


<!-- hot shops  -->
<div class="hotShop">
  <div class="font hotShopTitle en_LM fontColorGray">·HOT SHOP·</div>
  <div class="shops contentWidth center">
  <div class="shopUnit left">
    <img class="shopImage left" src="static/images/page/index/shopItem1.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem2.png"/>
    <img class="shopImage left" src="static/images/page/index/shopItem3.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem4.png"/>
    <div class="shopName font en_LM fontColorGray left">HERE IS SHOP NAME</div>
    <div class="shopReview font en_M fontColorGray left"><span class="ReviewCount">444</span>&nbsp;&nbsp;REVIEW</div>
    <div class="shopUnitSwitch right"></div>
    <div class="salerPhoto relative"><img src="static/images/page/index/salerPhoto.png"/></div>
  </div>
  
  <div class="shopUnit left shopMiddleMargin">
    <img class="shopImage left" src="static/images/page/index/shopItem1.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem2.png"/>
    <img class="shopImage left" src="static/images/page/index/shopItem3.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem4.png"/>
    <div class="shopName font en_LM fontColorGray left">HERE IS SHOP NAME</div>
    <div class="shopReview font en_M fontColorGray left"><span class="ReviewCount">444</span>&nbsp;&nbsp;REVIEW</div>
    <div class="shopUnitSwitch right"></div>
    <div class="salerPhoto relative"><img src="static/images/page/index/salerPhoto.png"/></div>
  </div>
  
  <div class="shopUnit right">
    <img class="shopImage left" src="static/images/page/index/shopItem1.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem2.png"/>
    <img class="shopImage left" src="static/images/page/index/shopItem3.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem4.png"/>
    <div class="shopName font en_LM fontColorGray left">HERE IS SHOP NAME</div>
    <div class="shopReview font en_M fontColorGray left"><span class="ReviewCount">444</span>&nbsp;&nbsp;REVIEW</div>
    <div class="shopUnitSwitch right"></div>
    <div class="salerPhoto relative"><img src="static/images/page/index/salerPhoto.png"/></div>
  </div>
  
  
  <div class="shopUnit left">
    <img class="shopImage left" src="static/images/page/index/shopItem1.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem2.png"/>
    <img class="shopImage left" src="static/images/page/index/shopItem3.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem4.png"/>
    <div class="shopName font en_LM fontColorGray left">HERE IS SHOP NAME</div>
    <div class="shopReview font en_M fontColorGray left"><span class="ReviewCount">444</span>&nbsp;&nbsp;REVIEW</div>
    <div class="shopUnitSwitch right"></div>
    <div class="salerPhoto relative"><img src="static/images/page/index/salerPhoto.png"/></div>
  </div>
  
  <div class="shopUnit left shopMiddleMargin">
    <img class="shopImage left" src="static/images/page/index/shopItem1.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem2.png"/>
    <img class="shopImage left" src="static/images/page/index/shopItem3.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem4.png"/>
    <div class="shopName font en_LM fontColorGray left">HERE IS SHOP NAME</div>
    <div class="shopReview font en_M fontColorGray left"><span class="ReviewCount">444</span>&nbsp;&nbsp;REVIEW</div>
    <div class="shopUnitSwitch right"></div>
    <div class="salerPhoto relative"><img src="static/images/page/index/salerPhoto.png"/></div>
  </div>
  
  <div class="shopUnit right">
    <img class="shopImage left" src="static/images/page/index/shopItem1.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem2.png"/>
    <img class="shopImage left" src="static/images/page/index/shopItem3.png"/>
    <img class="shopImage right" src="static/images/page/index/shopItem4.png"/>
    <div class="shopName font en_LM fontColorGray left">HERE IS SHOP NAME</div>
    <div class="shopReview font en_M fontColorGray left"><span class="ReviewCount">444</span>&nbsp;&nbsp;REVIEW</div>
    <div class="shopUnitSwitch right"></div>
    <div class="salerPhoto relative"><img src="static/images/page/index/salerPhoto.png"/></div>
  </div>
  
  
</div>
<!-- hot shops 结束  -->


<!-- independent brands  -->
<div class="independentBrand contentWidth center">
  <div class="font independentBrandTitle en_LM fontColorGray">·INDEPENDENT BRAND·</div>
  <div class="infoBoardForBrand">
    <div class="brandBoard contentWidth center">
      <div class="brandBanner brandBanner1 left"><img src="static/images/page/index/brand1.png"/></div>
      <div class="brandBanner brandBanner2 left"><img src="static/images/page/index/brand2.png"/></div>
      <div class="brandBanner brandBanner3 right"><img src="static/images/page/index/brand3.png"/></div>
      <div class="brandBanner brandBanner4 left"><img src="static/images/page/index/brand1.png"/></div>
      <div class="brandBanner brandBanner5 left"><img src="static/images/page/index/brand2.png"/></div>
      <div class="brandBanner brandBanner6 right"><img src="static/images/page/index/brand3.png"/></div>
    </div>
  </div>
</div>
<a class="readMore" href="#"><div class="brandReadMore contentWidth center font en_M fontColorGray">READ MORE</div></a>
<!-- independent brands 结束  -->


<!-- designers  -->
<div class="scroll-outer center">
	<div class="scroll owl-carousel">
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer1.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer2.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer3.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer4.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer5.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer6.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer7.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer8.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer9.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer10.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer11.png" alt=""></a>
		</div>
		<div class="item">
			<a href="#"><img src="static/images/page/index/designer12.png" alt=""></a>
		</div>
	</div>
    <div class="designerIdentify"><img src="static/images/page/index/designerIdentify.png"/></div> <!-- 这是保持位置不变的绿色designer图片 -->
</div>
<a class="readMore" href="#"><div class="designerReadMore contentWidth center font en_M fontColorGray">READ MORE</div></a>
<script type="text/javascript" src="static/javascript/owl.carousel.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.scroll').owlCarousel({
		items: 4,
		autoPlay: true,
		navigation: true,
		navigationText: ["",""],
		scrollPerPage: true
	});
});
</script>
<!-- designers 结束  -->

<!-- 页尾 -->
<div class="bottom font">
  <div class="bottomInfoContainer contentWidth center">
    <ul class="bottomInfo">
      <li class="infoTitle">NEWBIE GUIDE</li>
      <a href=""><li class="infoItem">COMMON PROBLEMS</li></a>
      <a href=""><li class="infoItem">SHOPPING PROCESS</li></a>
      <a href=""><li class="infoItem">RETURE PROCESS</li></a>
      <a href=""><li class="infoItem">TERMS OF SERVICE</li></a>
      <a href=""><li class="infoItem">REGISTRATION</li></a>
      <a href="login.html"><li class="infoItem">LOGIN</li></a>
    </ul>
    
    <ul class="bottomInfo">
      <li class="infoTitle">PAYMENT AND DELIVERY</li>
      <a href=""><li class="infoItem">PAYMENT METHOD</li></a>
      <a href=""><li class="infoItem">DISTRIBUTION METHOD</li></a>
      <a href=""><li class="infoItem">LOGISTICS PROCESS</li></a>
      <a href=""><li class="infoItem">CUSTOMS CLEARANCE SERVICE</li></a>
    </ul>
    
    <ul class="bottomInfo">
      <li class="infoTitle">PREFERENTIAL POLICY</li>
      <a href=""><li class="infoItem">VIP SYSTEM</li></a>
      <a href=""><li class="infoItem">HELLO COIN</li></a>
      <a href=""><li class="infoItem">COUPONS</li></a>
      <a href=""><li class="infoItem">GIFT CARD</li></a>
    </ul>
    
    <ul class="bottomInfo">
      <li class="infoTitle">INFORMATION</li>
      <a href=""><li class="infoItem">ABOUT US</li></a>
      <a href=""><li class="infoItem">JOIN US</li></a>
      <a href=""><li class="infoItem">SITE MAP</li></a>
      <a href=""><li class="infoItem">HELP INFORMATION</li></a>
      <a href=""><li class="infoItem">CONTACT US</li></a>
    </ul>
    
    <ul class="bottomInfo">
      <li class="infoTitle">CUSTOMER SERVICE</li>
      <a href=""><li class="infoItem">COMPLAINT&RIGHTS</li></a>
      <a href=""><li class="infoItem">GIVE ADVICES</li></a>
    </ul>
    
    <ul class="bottomInfo">
      <li class="infoTitle">SELLER GUIDE</li>
      <a href=""><li class="infoItem">COMMON PROBLEMS</li></a>
      <a href=""><li class="infoItem">HOW TO BE A SELLER</li></a>
      <a href=""><li class="infoItem">PUNISHMENT RULES</li></a>
      <a href=""><li class="infoItem">OVERSEARS MERCHANT CENTER</li></a>
    </ul>
    
    <ul class="bottomInfo">
      <li class="infoTitle">SERVICE TELEPHONE</li>
      <li class="infoItem">400-000-0000</li>
      <li class="infoItem">09：00-22：00</li>
      <li class="infoItem">MONDAY TO FRIDAY</li>
    </ul>
    
  </div>
</div>

<!-- 页尾结束 -->


</body>

</html>